<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="./1.css">
</head>

<body>
	<!-- flex 弹性布局  弹性盒子 -->
	<!-- 兼容性  IE8及一下不支持 -->
	<!-- 父级： 声明弹性盒子  display:flex(行内块元素) inline-flex(行元素)-->


	<!-- 主轴 flex-direction  子级的排列方向  默认 row 左=>右 -->
	<!-- row row-reverse column  column-reverse -->

	<!-- 辅轴 交叉轴 flex-wrap  默认值  nowrap -->
	<!-- nowrap wrap  wrap-reverse -->

	<!-- 对齐方式  -->
	<!--*** 主轴对齐方式  justify-content  默认值flex-start -->
	<!-- flex-start  flex-end  center space-between  space-around space-evenly-->

	<!-- 交叉轴 单轴对齐  align-items  默认值 flex-start -->
	<!-- flex-start  flex-end  center -->

	<!-- 交叉轴 多轴对齐   align-content  -->
	<!-- flex-start flex-end center space-between space-around space-evenly -->




	<div class="box">
		<div>11</div>
		<div>22</div>
		<div>33</div>
		<div>44</div>
	</div>

	<div class="ban">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>











	<div style="height: 300px;"></div>
</body>

</html>